<template>
  <div class="Home">
    <div class="head">
      <div class="logo">
        <div class="img">LOGO</div>
        <div class="logo_text">
          <div style="font-size:34px;font-weight:900"><b>高校内邮权力运行数据库网</b></div>
          <div>University Internal Power Running Database Network</div>
        </div>
      </div>
      <div class="head_btn">
        <div class="breadcrumb">
          <el-breadcrumb separator="|">
            <el-breadcrumb-item :to="{ path: '/' }">会员登录</el-breadcrumb-item>
            <el-breadcrumb-item>注册</el-breadcrumb-item>
            <el-breadcrumb-item>收藏本站</el-breadcrumb-item>
            <el-breadcrumb-item>设置首页</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="message">
          <i class="el-icon-s-promotion"
             style="font-size:12px">最新通知：此处是滚动信息栏，可以将最新的通知进行循环播放</i>
        </div>
      </div>
    </div>
    <el-container>
      <el-header>
        <div class="daohang">
          <el-menu :default-active="activeIndex"
                   class="el-menu-demo"
                   mode="horizontal"
                   @select="handleSelect">
            <el-menu-item index="1"
                          @click="goD">首页</el-menu-item>
            <el-menu-item index="2"
                          @click="goB">学术动态</el-menu-item>
            <el-menu-item index="3"
                          @click="goC">文献库</el-menu-item>
            <el-menu-item index="4">文件库</el-menu-item>
            <el-menu-item index="5">案例库</el-menu-item>
            <el-menu-item index="4">联系我们</el-menu-item>
            <el-menu-item index="5">关于我们</el-menu-item>
          </el-menu>
        </div>
      </el-header>
      <el-container>
        <el-aside width="360px">
          <div class="two">
            <div class="aside_one">
              <div class="title1">文献库</div>
              <div class="text1">
                <el-tree :data="data"
                         :props="defaultProps"
                         @node-click="handleNodeClick"></el-tree>
              </div>
            </div>
            <div class="aside_two">
              <div class="title2">联系我们</div>
              <div class="text2"
                   style="text-align:left;margin-left:30px;font-weight:600;margin-top:40px">
                <p>天津职业技术师范大学软件工程学院</p>
                <p>软件1901班李胜龙</p>
                <p>0304190106</p>
              </div>
            </div>
          </div>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [{
        label: '国内文献库',
        children: [{
          label: '学术论文'
        }, {
          label: '学术论著'
        }]
      }, {
        label: '国外文献库'
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      methods: {
        goD () {
          // eslint-disable-next-line standard/object-curly-even-spacing
          this.$router.push({ 'path': '/' })
        },
        goB () {
          // eslint-disable-next-line standard/object-curly-even-spacing
          this.$router.push({ 'path': '/first/tree' })
        },
        goC () {
          // eslint-disable-next-line standard/object-curly-even-spacing
          this.$router.push({ 'path': '/first/trees' })
        }
      }
    }
  },
  methods: {
    handleNodeClick (data) {
      console.log(data)
    }
  }
}
</script>

<style scoped>
.head {
  display: flex;
  height: 200px;
}
.logo {
  display: flex;
  height: 100px;
  width: 45%;
  margin-top: 40px;
  margin-left: 40px;
}
.head_btn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  height: 100px;
  width: 40%;
  margin-top: 40px;
  margin-left: 200px;
  margin-right: 40px;
}
.img {
  margin-left: 40px;
  margin-top: 40px;
  margin-right: 20px;
  font-size: 25px;
  font-weight: bolder;
}
.logo_text {
  margin-top: 25px;
  width: 500px;
}
.breadcrumb {
  margin-top: 35px;
  margin-right: 40px;
  float: right;
}
.message {
  margin-top: 20px;
  margin-right: 40px;
}
.el-header {
  background-color: rgb(154, 215, 243);
  color: #333;
  text-align: center;
  margin-right: 70px;
  margin-left: 70px;
}

.el-aside {
  background-color: white;
  color: #333;
  text-align: center;
  margin-left: 70px;
  margin-top: 20px;
  height: 700px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  margin-left: 20px;
  margin-right: 70px;
  margin-top: 20px;
}
.daohang {
  height: 60px;
  width: 100%;
}
.el-menu {
  background-color: rgb(223, 235, 252);
  width: 100%;
  background-color: rgb(154, 215, 243);
}
.Home {
  background-color: rgb(223, 235, 252);
  min-width: 1500px;
  height: 100%;
}
.two {
  display: flex;
  flex-direction: column;
}
.aside_one {
  display: flex;
  flex-direction: column;
}
.title1 {
  width: 100%;
  height: 50px;
  background-color: rgba(43, 130, 243, 0.685);
  color: #d3dce6;
  font-weight: 900;
  font-size: 25px;
  line-height: 45px;
}
.title2 {
  margin-top: 100px;
  width: 100%;
  height: 50px;
  background-color: rgba(2, 38, 87, 0.685);
  color: #e1eaf5;
  font-weight: 900;
  font-size: 25px;
  line-height: 45px;
}
.el-menu-item {
  margin-right: 10px;
  font-weight: 600;
  font-size: 18px;
  color: rgb(48, 46, 46);
}
</style>
